<template>
  <div class="app-wrap">
    <div class="nav">
      <div v-if="!isHome" class="nav-button" @click="navToPrevious"><i class="el-icon-arrow-left" style="font-size: 20px"></i></div>
      <div style="flex: 1; text-align: center; color: #fff">{{ pageTitle }}</div>
      <div class="nav-button" @click="closeWindow"><i class="el-icon-close" style="font-size: 20px"></i></div>
    </div>
    <router-view />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  created() {},
  computed: {
    ...mapGetters(['preRouter', 'currentRouter']),
    isHome() {
      return this.currentRouter.path == '/home' ? true : false
    },
    pageTitle() {
      return this.currentRouter.meta && this.currentRouter.meta.title ? this.currentRouter.meta.title : ''
    },
  },
  mounted() {},
  methods: {
    closeWindow() {
      window.close()
    },
    navToPrevious() {
      const { path } = this.preRouter
      this.$router.push({ path })
    },
  },
}
</script>
<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #555;
  background: #fff;
  width: 380px;
  height: 420px;
  box-sizing: border-box;
}
.app-wrap {
  box-sizing: border-box;
  /* background: #ddd; */
  border: 1px #5fb878 solid;
  width: calc(100vw - 17px);
  height: calc(100vh - 18px);
}
.nav {
  width: 100%;
  height: 30px;
  background: #5fb878;
  display: flex;
  align-items: center;
  border-bottom: 1px #5fb878 solid;
}
.nav-button {
  height: 30px;
  width: 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-button:hover {
  background: #eee;
  color: #5fb878;
}
</style>
